<template>
    <div>
        <div style="width: 35%; height: 450px; float: left;" id="histogram" ref="histogram"></div>
        <div style="width: 35%; height: 450px; float: left; margin-left: 20px;" id="lineChart" ref="lineChart"></div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
import Yuanquan from './yuanquan.vue';

export default {
    components: {
        Yuanquan
    },
    name: 'StoreLeaveChart',

    data() {
        return {
            list: [],
            myBarChart: null,
            myLineChart: null,
            barOption: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                title: {
                    text: '账户余额图'
                },
                legend: {
                    data: []
                },
                xAxis: {
                    data: [],
                },
                yAxis: {
                    type: 'value'
                },
                series: [],
                color: ['#8dcfff']
            },
            lineOption: {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: '账户余额变化趋势'
                },
                legend: {
                    data: []
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [],
                color: ['#f97b72', '#fdd57f', '#74dbef']
            },
        }
    },
    mounted() {
        this.initBarChart();
        this.initLineChart();
    },
    methods: {
        initBarChart() {
            this.myBarChart = echarts.init(this.$refs.histogram);
            this.myBarChart.setOption(this.barOption);
        },
        initLineChart() {
            this.myLineChart = echarts.init(this.$refs.lineChart);
            this.myLineChart.setOption(this.lineOption);
        },
        updateCharts() {
            const storeData = this.list.map(item => item.presentMoney);
            const AxData = this.list.map(item => item.accountName);
            const colors = ['#8dcfff', '#f97b72', '#fdd57f', '#74dbef'];

            this.barOption.legend.data = this.list.map(item => item.accountName);
            this.barOption.xAxis.data = AxData;
            this.barOption.series = this.list.map((item, index) => ({
                name: item.accountName,
                data: [item.presentMoney],
                type: 'bar',
                barWidth: '40%',
                stack: 'total',
                color: colors[index % colors.length]
            }));
            this.myBarChart.setOption(this.barOption);

            this.lineOption.legend.data = this.list.map(item => item.accountName);
            this.lineOption.xAxis.data = AxData;
            this.lineOption.series = this.list.map((item, index) => ({
                name: item.accountName,
                data: [item.presentMoney],
                type: 'line',
                color: colors[index % colors.length]
            }));
            this.myLineChart.setOption(this.lineOption);
        },
        getAccounts() {
            this.axios({
                url: "/info/account/selectAll"
            }).then(rs => {
                this.list = rs.data.accounts;
                this.updateCharts();
            }).catch(error => {
                console.error('Error fetching data:', error);
            });
        }
    },
    created() {
        this.getAccounts();
    }
}
</script>